<template>
	<el-card shadow="never" class="aui-card--fill">
		<div class="mod-sys__user">
			<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
				<el-form-item>
					<el-input v-model="dataForm.username" placeholder="用户名" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<ren-select v-model="dataForm.gender" dict-type="gender"
					            placeholder="性别"></ren-select>
				</el-form-item>
				<el-form-item>
					<ren-dept-tree v-model="dataForm.deptId" placeholder="选择部门"
					               :query="true"></ren-dept-tree>
				</el-form-item>
				<el-form-item>
					<el-button @click="getDataList()">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-if="hasPermission('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-if="hasPermission('sys:user:delete')" type="danger" @click="deleteHandle()">删除
					</el-button>
				</el-form-item>
				<el-form-item>
					<el-button v-if="hasPermission('sys:user:export')" type="info" @click="exportHandle(url, dataForm)">导出
					</el-button>
				</el-form-item>
			</el-form>
			<el-table
				v-loading="dataListLoading"
				:data="dataList"
				border
				@selection-change="dataListSelectionChangeHandle"
				@sort-change="dataListSortChangeHandle"
				style="width: 100%;">
				<el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
				<el-table-column prop="username" label="用户名" sortable="custom" header-align="center"
				                 align="center"></el-table-column>
				<el-table-column prop="deptName" label="所属部门" header-align="center"
				                 align="center"></el-table-column>
				<el-table-column prop="email" label="邮箱" header-align="center"
				                 align="center"></el-table-column>
				<el-table-column prop="mobile" label="手机号" sortable="custom" header-align="center"
				                 align="center"></el-table-column>
				<el-table-column prop="gender" label="性别" sortable="custom" header-align="center"
				                 align="center">
					<template #default="scope">
						{{ getDictLabel("gender", scope.row.gender) }}
					</template>
				</el-table-column>
				<el-table-column prop="status" label="状态" sortable="custom" header-align="center"
				                 align="center">
					<template #default="scope">
						<el-tag v-if="scope.row.status === 0" type="danger">停用
						</el-tag>
						<el-tag v-else type="success">正常</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createDate" label="创建时间" sortable="custom"
				                 header-align="center"
				                 align="center" width="180"></el-table-column>
				<el-table-column label="操作" fixed="right" header-align="center" align="center" width="150">
					<template #default="scope">
						<el-button v-if="hasPermission('sys:user:update')" type="primary" link
						           @click="addOrUpdateHandle(scope.row.id)">编辑
						</el-button>
						<el-button v-if="hasPermission('sys:user:delete')" type="danger" link
						           @click="deleteHandle(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<c-pagination @page-change="pageChange" :total="total" :page="page" :limit="limit"></c-pagination>

			<!-- 弹窗, 新增 / 修改 -->
			<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdateRef" @refreshDataList="getDataList"></add-or-update>
		</div>
	</el-card>
</template>

<script setup>
import AddOrUpdate from './user-add-or-update.vue'
import {nextTick, reactive, ref, unref} from "vue";
import {getDictLabel, hasPermission} from "../../../utils/util.js";
import CPagination from "../../../components/c-pagination.vue";
import http from "../../../utils/request.js";
import {exportHandle, message, messageBox} from "../../../utils/commonScript.js";


const url = '/sys/user'

const addOrUpdateRef = ref()
const addOrUpdateVisible = ref(false)
const page = ref(1)
const limit = ref(10)
const order = ref('') // 排序，asc／desc
const orderField = ref('') // 排序，字段
const dataForm = reactive({
	username: '',
	deptId: '',
	gender: '',
})
const dataListSelections = ref([])
const dataListLoading = ref(false) // 数据列表，loading状态
const dataList = ref([]) // 数据列表
const total = ref(0) // 总条数

const query = () => {
	dataListLoading.value = true
	http.get(`${url}/page`,
		{
			params: {
				order: unref(order),
				orderField: unref(orderField),
				page:  page.value,
				limit: limit.value,
				...dataForm
			}
		}
	).then(({data: res}) => {
		dataListLoading.value = false
		if (res.code !== 0) {
			dataList.value = []
			total.value = 0
			return message.error(res.msg)
		}
		dataList.value = res.data.list
		total.value = res.data.total
	}).catch(() => {
		dataListLoading.value = false
	})
}
query()
// 查询
const getDataList = () => {
	page.value = 1
	limit.value = 10
	query()
}
// 分页
const pageChange = (p, l) => {
	page.value = p
	limit.value = l
	query()
}

// 多选
const dataListSelectionChangeHandle = (val) => {
	dataListSelections.value = val
}
// 排序
const dataListSortChangeHandle = (data) => {
	if (!data.order || !data.prop) {
		order.value = ''
		orderField.value = ''
		return false
	}
	order.value = data.order.replace(/ending$/, '')
	orderField.value = data.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
	query()
}
// 新增 / 修改
const addOrUpdateHandle = (id='') => {
	addOrUpdateVisible.value = true
	nextTick(() => {
		addOrUpdateRef.value.init(id)
	})
}
// 删除
const deleteHandle = (id) => {
	if (!id && dataListSelections.value.length <= 0) {
		return message({
			message: '请选择删除项',
			type: 'warning',
			duration: 500
		})
	}
	messageBox.confirm('确定进行删除操作?', '提示', {
		confirmButtonText: '确定',
		cancelButtonText: '取消',
		type: 'warning'
	}).then(() => {
		const params = {'data': id ? [id] : dataListSelections.value.map(item => item['id'])}
		http.delete(url, params).then(({data: res}) => {
			if (res.code !== 0) {
				return message.error(res.msg)
			}
			message({
				message: '操作成功',
				type: 'success',
				duration: 500,
				onClose: () => {
					query()
				}
			})
		}).catch(() => {
		})
	}).catch(() => {
	})
}
</script>
